﻿﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>潜在客户报表查询</title>
<#--freemarker引入模板文件，相对路径-->
    <#include "../common/link.ftl">

    <script>
        $(function () {
            //日期的插件使用：时间段
            $('.input-daterange').datepicker({
                language: "zh-CN",
                autoclose: true,
                todayHighlight: true,
                clearBtn: true
            });

            //打开模态框显示柱状图或饼状图
            $(".btn-chart").click(function () {
                //因为FreeMarker默认只加载一次，所以我们每次点击都要清空一下缓存
                $("#myModal").removeData('bs.modal');

                //模态框需要通过url来加载内容，文档中加载url的方式remote
                var url = $(this).data('url');
                $("#myModal").modal({
                    remote : url + "?" + $("#searchForm").serialize()
                    //'/customerReport/listByBar.do'
                });

                //打开模态框
                $("#myModal").modal('show');
            })

        })
    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="customerReport"/>

    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表查询</h1>
        </section>
        <section class="content">

            <div class="box">
                <!--高级查询--->
                <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
                    <div class="form-group">
                        <label for="keyword">员工姓名:</label>
                        <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword!}"
                               placeholder="请输入员工姓名">
                    </div>

                    <div class="form-group">
                        <label>时间段查询:</label>
                        <div class="input-daterange input-group" id="datepicker">
                            <input type="text" class="input-sm form-control" name="beginDate"
                                   value="${(qo.beginDate?string('yyyy-MM-dd'))!}"/>
                            <span class="input-group-addon">to</span>
                            <input type="text" class="input-sm form-control" name="endDate"
                                   value="${(qo.endDate?string('yyyy-MM-dd'))!}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="dept"> 分组类型:</label>
                        <select class="form-control" id="groupType" name="groupType">
                            <option value="e.name">员工</option>
                            <option value="DATE_FORMAT(c.input_time, '%Y')">年</option>
                            <option value="DATE_FORMAT(c.input_time, '%Y-%m')">年-月</option>
                            <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">年-月-日</option>
                        </select>
                        <script>
                            //分组类型的回显
                            $('#groupType').val("${qo.groupType!}")
                        </script>
                    </div>
                    <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                        查询
                    </button>
                    <button type="button" class="btn btn-info btn-chart" data-url="/customerReport/listByBar.do">
                        <span class="glyphicon glyphicon-stats"></span> 柱状图
                    </button>
                    <button type="button" class="btn btn-warning btn-chart" data-url="/customerReport/listByPie.do">
                        <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                    </button>


                </form>
                <!--编写内容-->
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <tr>
                            <th>分组类型</th>
                            <th>潜在客户新增数</th>
                        </tr>
                        <#list result.list! as map>
                            <tr>
                                <td>${map.groupType!}</td>
                                <td>${map.number!}</td>
                            </tr>
                        </#list>
                    </table>

                    <!--分页插件的引用-->
                    <#include "../common/page.ftl"/>

                </div>
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl"/>
</div>
<#--显示报表模态框-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </DIV>
</div>


</body>
</html>
